<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>cm-admin</title>
	<include file="Public:header"/>
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <include file="Public:body_top"/>
   
    <div class="container-fluid">
      <div class="row">
        <div class="sidebar bill-box">
          <div class="bill">
            <div class="bill-titile">
              下单
              <a class="btn-clear pull-right" href="#"><i class="cm-close"></i>清除全部</a>
            </div>
            <div class="bill-addr">
              <div class="add-addr" data-toggle="modal" data-target="#add-addr">
                <a href="#">添加收货人信息</a>
              </div>
              <!-- 添加收货人之后显示信息 -->
              <!-- <div class="edit-addr" data-toggle="modal" data-target="#add-addr">
                <a href="#">
                  <h5><span>收货人：张三</span><span class="pull-right">13612345678</span></h5>
                  <p>浙江省杭州市西湖区 xx路xx小区xx幢1207室</p>
                </a>
              </div> -->
            </div>
            <div class="bill-note">
              <a href="#" data-toggle="modal" data-target="#add-note">添加备注</a>
            </div>
            <div class="bill-total">
              金额：￥123.00
            </div>
            <div class="bill-list">
              <ul>
                <li>
                  <div class="goods-del">
                    <a href="#"><i class="cm-cancle"></i></a>
                  </div>
                  <div class="goods-info">
                    <h5>海南妃子笑荔枝</h5>
                    <p>￥29.00 <span>X1</span></p>
                  </div>
                  <div class="goods-num">
                    <span class="minus">-</span>
                    <span class="num">1</span>
                    <span class="plus">+</span>
                  </div>
                </li>
                <li>
                  <div class="goods-del">
                    <a href="#"><i class="cm-cancle"></i></a>
                  </div>
                  <div class="goods-info">
                    <h5>海南妃子笑荔枝</h5>
                    <p>￥29.00 <span>X1</span></p>
                  </div>
                  <div class="goods-num">
                    <span class="minus">-</span>
                    <span class="num">1</span>
                    <span class="plus">+</span>
                  </div>
                </li>
                <li>
                  <div class="goods-del">
                    <a href="#"><i class="cm-cancle"></i></a>
                  </div>
                  <div class="goods-info">
                    <h5>海南妃子笑荔枝</h5>
                    <p>￥29.00 <span>X1</span></p>
                  </div>
                  <div class="goods-num">
                    <span class="minus">-</span>
                    <span class="num">1</span>
                    <span class="plus">+</span>
                  </div>
                </li>
                <li>
                  <div class="goods-del">
                    <a href="#"><i class="cm-cancle"></i></a>
                  </div>
                  <div class="goods-info">
                    <h5>海南妃子笑荔枝</h5>
                    <p>￥29.00 <span>X1</span></p>
                  </div>
                  <div class="goods-num">
                    <span class="minus">-</span>
                    <span class="num">1</span>
                    <span class="plus">+</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="bill-submit">
            <a href="#" class="btn btn-primary">点击下单</a>
          </div>
        </div>
        <div class="main bill-main">
          <div class="main-hd">
            <ul class="tabs-box bill-tabs">
              <li class="active" data-target="#type-all">全部商品</li>
              <li data-target="#type1">分类一</li>
              <li data-target="#type2">分类二</li>
            </ul>
            <div class="searchbar">
              <div class="search-box">
                <input type="search" placeholder="输入商品名称"><a class="search-text-clear hidden" href="javascript:;"><i class="cm-close"></i></a>
              </div><input type="submit" value="搜索">
            </div>
          </div>
          <div class="main-bd">
            <div class="tabs-con">
              <div class="goods row tabs-item active" id="type-all">
                <div class="goods-item">
                  <a href="#">
                    <h5>海南妃子笑荔枝</h5>
                    <p>￥29.00</p>
                  </a>
                </div>
                <div class="goods-item">
                  <a href="#">
                    <h5>海南妃子笑荔枝</h5>
                    <p>￥29.00</p>
                  </a>
                </div>
                <div class="goods-item">
                  <a href="#">
                    <h5>海南妃子笑荔枝</h5>
                    <p>￥29.00</p>
                  </a>
                </div>
                <div class="goods-item">
                  <a href="#">
                    <h5>海南妃子笑荔枝</h5>
                    <p>￥29.00</p>
                  </a>
                </div>
                <div class="goods-item">
                  <a href="#">
                    <h5>海南妃子笑荔枝</h5>
                    <p>￥29.00</p>
                  </a>
                </div>
                <div class="goods-item">
                  <a href="#">
                    <h5>海南妃子笑荔枝</h5>
                    <p>￥29.00</p>
                  </a>
                </div>
              </div>
              <div class="goods row tabs-item" id="type1">
                <a class="col-xs-6 col-sm-4 col-md-3" href="#">
                  <h5>海南妃子笑荔枝</h5>
                  <p>￥29.00</p>
                </a>
                <a class="col-xs-6 col-sm-4 col-md-3" href="#">
                  <h5>海南妃子笑荔枝</h5>
                  <p>￥29.00</p>
                </a>
                <a class="col-xs-6 col-sm-4 col-md-3" href="#">
                  <h5>海南妃子笑荔枝</h5>
                  <p>￥29.00</p>
                </a>
                <a class="col-xs-6 col-sm-4 col-md-3" href="#">
                  <h5>海南妃子笑荔枝</h5>
                  <p>￥29.00</p>
                </a>
              </div>
              <div class="goods row tabs-item" id="type2">
                <a class="col-xs-6 col-sm-4 col-md-3" href="#">
                  <h5>海南妃子笑荔枝</h5>
                  <p>￥29.00</p>
                </a>
                <a class="col-xs-6 col-sm-4 col-md-3" href="#">
                  <h5>海南妃子笑荔枝</h5>
                  <p>￥29.00</p>
                </a>
                <a class="col-xs-6 col-sm-4 col-md-3" href="#">
                  <h5>海南妃子笑荔枝</h5>
                  <p>￥29.00</p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="add-note">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">添加备注</h4>
          </div>
          <div class="modal-body">
            <textarea class="form-control" rows="3" placeholder="请输入备注信息"></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="add-addr">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">添加收货人信息</h4>
          </div>
          <div class="modal-body">
            <div class="form-box">
              <form class="form-horizontal">
                <div class="form-group">
                  <label class="col-sm-3 control-label">是否自提</label>
                  <div class="col-sm-8">
                    <ul class="tabs-box ztkd-tabs">
                      <li class="active" data-target="#kd">快递</li>
                      <li data-target="#zt">自提</li>
                    </ul>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">姓名</label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">手机</label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control">
                  </div>
                </div>
                <div class="tabs-con">
                  <div class="tabs-item active" id="kd">
                    <div class="form-group">
                      <label class="col-sm-3 control-label">地址</label>
                      <div class="col-sm-2">
                        <div class="select-type">
                          <select class="form-control">
                            <option>上海市</option>
                            <option>浙江省</option>
                            <option>江苏省</option>
                            <option>安徽省</option>
                            <option>福建省</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-sm-2">
                        <div class="select-type">
                          <select class="form-control">
                            <option>杭州市</option>
                            <option>嘉兴市</option>
                            <option>绍兴市</option>
                            <option>湖州市</option>
                            <option>宁波市</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-sm-2">
                        <div class="select-type">
                          <select class="form-control">
                            <option>桐乡市</option>
                            <option>海宁市</option>
                            <option>海盐县</option>
                            <option>平湖市</option>
                            <option>嘉善县</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">详细地址</label>
                      <div class="col-sm-8">
                        <input type="text" class="form-control">
                      </div>
                    </div>
                  </div>
                  <div class="tabs-item" id="zt">
                    <div class="form-group">
                      <label class="col-sm-3 control-label">自提点</label>
                      <div class="col-sm-8">
                        <div class="select-type">
                          <select class="form-control">
                            <option>上海市</option>
                            <option>浙江省</option>
                            <option>江苏省</option>
                            <option>安徽省</option>
                            <option>福建省</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>